<template>
  <div id="app">
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 80%;margin: auto;">
        <el-tab-pane label="本地检测" name="first">
          <div style="width: 60%;margin:auto">
            <br />
            <el-radio v-model="radio" label="1">检测指定进程</el-radio>
            <el-radio v-model="radio" label="2">检测可执行程序</el-radio>
            <div id="pid" v-if="radio == '1'">
              <br />
              <el-input v-model="local_pid_input" placeholder="请输入被检测进程PID"></el-input>
            </div>

            <div id="comm" v-if="radio == '2'">
              <br />
              <el-input v-model="local_cmd_input" placeholder="请输入被检测程序命令行"></el-input>
              <br /><br />
              <el-input v-model="local_env_input" placeholder="请输入被检测程序环境变量"></el-input>
            </div>
            <br />
            <el-input placeholder="请输入管理员密码" v-model="local_passwd_input" show-password></el-input>
            <br /> <br />
            <el-button type="primary" v-on:click="begin_local_check(1,radio)">开始检测</el-button>
          </div>
        </el-tab-pane>

        <el-tab-pane label="远程检测" name="second">
          <div style="width: 60%;margin:auto">
            <br />
            <el-input v-model="remote_pid_input" placeholder="请输入被检测进程PID"></el-input>
            <br />
            <el-input v-model="remote_addr_input" placeholder="请输入远程IP地址"></el-input>
            <el-input v-model="remote_account_input" placeholder="请输入远程用户账号"></el-input>
            <el-input placeholder="请输入远程用户密码" v-model="remote_passwd_input" show-password></el-input>
            <br /> <br />
            <el-button type="primary" @click="begin_remote_check()">开始检测</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-card v-loading="loading"  element-loading-text="正在检测..." class="box-card" style="width: 80%;margin: auto;">
        <div slot="header" class="clearfix" v-if="loading == false">
          <span>检测结果</span>
        </div>
        <div v-if="loading== false" v-for="o in 4" :key="o" class="text item">
          {{'线程信息： ' + o }}
        </div>
      </el-card>

      <el-card id="main" style="width: 80%; height: 400px; margin: auto;">
      </el-card >
    </template>
  </div>
</template>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
    height: 200px;
  }
</style>

<script>
import * as echarts from 'echarts';

const cmd_type = {
  NONE: 0,
  LOCAL_PID: 1,
  LOCAL_CMDLINE: 2,
  REMOTE_PID: 3,
  REMOTE_CMDLINE: 4,
};

function TableData () {
  this.CmdType = cmd_type.NONE;
  this.Pid = 0;
  this.Passwd = "";
  this.Addr = "";
  this.User = "";
  this.CmdLine = "";
  this.Env = {};
}

export default {
  data() {
    return {
      local_pid_input: -1,
      local_passwd_input: '',
      local_cmd_input: '',
      local_env_input: '',
      remote_account_input: '',
      remote_passwd_input: '',
      remote_addr_input: '',
      remote_pid_input: -1,
      radio: '1',
      loading: true,
      afterchecked: false,
      deadlockgraph: {},
      deadlockinfo: [],
      lockinfo:[]
    };
  },
  mounted() {
    this.chartDraw();
    this.listener();
  },
  methods:{
    begin_local_check(isLocal, isPid){
      let td = new TableData();
      if(isLocal){
        
      }else if(!isLocal){
        td.CmdType = cmd_type.REMOTE_PID;
        td.Pid = remote_pid_input;
        td.Addr = remote_addr_input;
        td.User = remote_
      }
      this.$vscode.postMessage(data);
    },
    chartDraw() {
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        title: {
          text: '死锁关系图'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: false,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: [
              {
                name: 'Node 1',
                x: 300,
                y: 300
              },
              {
                name: 'Node 2',
                x: 800,
                y: 300
              },
              {
                name: 'Node 3',
                x: 550,
                y: 100
              },
              {
                name: 'Node 4',
                x: 550,
                y: 500
              }
            ],
            // links: [],
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                  show: true
                },
                lineStyle: {
                  width: 5,
                  curveness: 0.2
                }
              },
              {
                source: 'Node 2',
                target: 'Node 1',
                label: {
                  show: true
                },
                lineStyle: {
                  curveness: 0.2
                }
              },
              {
                source: 'Node 1',
                target: 'Node 3'
              },
              {
                source: 'Node 2',
                target: 'Node 3'
              },
              {
                source: 'Node 2',
                target: 'Node 4'
              },
              {
                source: 'Node 1',
                target: 'Node 4'
              }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};

</script>